// 引入骨架屏组件
// import XtxSkeleton from './xtx-skeleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
// import XtxMore from './xtx-more.vue'
// import XtxBread from './xtx-bread.vue'
import { useIntersectionObserver } from '@vueuse/core'

const Fn = require.context('./', false, /\.vue$/)

// 默认导出
export default {
  // install方法进行全部注册
  install (app) {
    // app.component(XtxBread.name, XtxBread)
    // app.component(XtxMore.name, XtxMore)
    // app.component(XtxSkeleton.name, XtxSkeleton)
    // app.component(XtxCarousel.name, XtxCarousel)
    Fn.keys().forEach(item => {
      // app.component(item)
      const com = Fn(item).default
      app.component(com.name, com)
    })
    // 注册全局自定义令
    app.directive('lazy', {
      mounted (a, b) {
        const { stop } = useIntersectionObserver(
          a,
          ([{ isIntersecting }], observerElement) => {
            const targetIsVisible = isIntersecting
            // console.log(targetIsVisible.)
            if (targetIsVisible) {
              a.src = b.value
              a.onerror = () => {
                a.src = require('@/assets/images/200.png')
              }
              stop()
            }
          }
        )
      }
    }

    )
  }
}
